import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
import packageImg from '@/assert/images/customer/package.png'
import { Line } from 'rc-progress'
interface ICount {
    text: string,
    totalNum: string,
    saleNum: string
}

const Bar = styled.div`  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative; 
      width:100%;
      height: 10.8rem;
      margin-top:3rem;
      .top{
        flex:1 1 50%;
        width:100%;
        .text{
            flex:1 1 30%;
            text-align: center;
            color:#fff;
            font-size: 1.6rem; 
        }
        .rate{ 
            flex:1 1 30%;
            text-align: center;
            color:#00C6FF;
            font-size: 1.4rem;
            font-weight: bold;
        }
      }
      .bottom{
        flex:1 1 30%;
        width:100%; 
        .progress-bar{ 
            padding-left:5rem; 
            width: 80%;  
            text-align: center;
        }
        .bar-num{
            position: absolute;
            color: #fff;
            left: 50%;
            top:70%;
            transform: translate(-50%,-50%);
            font-size: 1.6rem;
            font-weight: bold;
        }
      }

   
 
    
`

const Content: FC<ICount> = function (props) {

    return (
        <Bar>
            <div className='top'>
                <div className='text'>{props.text}</div>
                <div className='rate'>{props.saleNum}/{props.totalNum}</div>
            </div>
            <div className='bottom'>
                <div className='progress-bar'>
                    <Line percent={(parseFloat(props.saleNum!) / parseFloat(props.totalNum!)) * 100} strokeWidth={10} trailWidth={10} strokeColor="#19D9FE" trailColor="#045585" />
                </div>
                <div className='bar-num'>{((parseFloat(props.saleNum!) / parseFloat(props.totalNum!)) * 100).toFixed(2) + '%'}</div>

            </div>


        </Bar>
    )
}

export default Content
